﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"> </script>
    <LINK type="text/css" href="css/sunny/jquery-ui-1.8.12.custom.css" rel="stylesheet" />	
    <LINK type="text/css" href="css/sunny/special.css" rel="stylesheet" />

    <script>
        $(function () {
            $("a.button").button();

            $(".effect").hide();

            // set effect from select menu value
            $("a.button").click(function () {
                runEffect(this);
                return false;
            });

            function runEffect(obj) {
                var options = {};

                var name = $(obj).attr('id') + "_content"

                $(".effect").hide();

                // run the effect
                $("[id=" + name + "]").show("slide", options, 500);
            };

        });
    </script>

    <style>
        .floatingmenu 
        {
            float:left;
            display:block;
            width:150px;
        }

        
        a.button 
        {
            margin-bottom: 5px;
            width:150px;
        }
        
        .effect { width: 400px; height: 450px; padding: 0.4em; position: relative; float:right;}
	    .effect h3 { margin: 0; padding: 0.4em; text-align: center; }
    </style>

    <div style="width:575px; float:left; position:relative;">
        <div class="floatingmenu">
            <a href="#" id="profile" class="button">Vocal Profile</a>
            <a href="#" id="training" class="button">Training</a>
            <a href="#" id="studio" class="button">Studio Capabilities</a>
            <a href="#" id="resume" class="button">Resume</a>
        </div>

        <div id="profile_content" class="ui-widget-content ui-corner-all effect">
		    <h3 class="ui-widget-header ui-corner-all">Vocal Profile</h3>
		    <p>
			    Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		    </p>
	    </div>
        <div id="training_content" class="ui-widget-content ui-corner-all effect">
		    <h3 class="ui-widget-header ui-corner-all">Training</h3>
		    <p>
			    Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		    </p>
	    </div>
        <div id="studio_content" class="ui-widget-content ui-corner-all effect">
		    <h3 class="ui-widget-header ui-corner-all">Studio Capabilities</h3>
		    <p>
			    Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		    </p>
	    </div>
        <div id="resume_content" class="ui-widget-content ui-corner-all effect">
		    <h3 class="ui-widget-header ui-corner-all">Resume</h3>
		    <p>
			    Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		    </p>
	    </div>
    </div>





   
</body>
</html>
